<template>
	<view class="content">
		<view class="shop-wrapper">
			<view class="item" v-for="(item,index) in shopData" :key="index" @click="$emit('clickItem',item)">
				<view class="img">
					<image :src="item.image" mode="scaleToFill" class="image"></image>
				</view>
				<view class="title">
					{{item.store_name}}
				</view>
				<div class="price">
					￥{{item.price}}
				</div>
			</view>
 
		</view>
	</view>
</template>

<script>
	export default {
		props:['shopData'],
		data() {
			return {
				
			};
		}
	}
</script>

<style>

.content{
	background-color: #f1f1f1;
	/* padding: 20rpx; */
}
.shop-wrapper{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item{
	width: 370rpx;
	background-color: #FFFFFF;
	margin-top: 10rpx;
 
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-radius: 3%;
}
.img{
 
	height: 370rpx;
	width: 370rpx;
	
}
.item .image{
	height: 100%;
	width: 100%;
	border-radius: 3%;
 
}
  .title{
	font-size: 26rpx;
	 display: -webkit-box;
	 -webkit-line-clamp: 2;
	 -webkit-box-orient: vertical;
	 overflow: hidden;
	height: 68rpx;
	
}
.price{
	color: #f23030;
	font-size: 32rpx;
	font-weight: 600;
	margin: 20rpx 0 ;
	 
}
</style>
